<template>
	<view class="Global">
			<!-- <image class="imagepage" src="/static/background@2x.png" mode=""></image> -->
			<bgImage></bgImage>
		<MyNav :title="title" bgColor="" :backIcon="isback"></MyNav>


<!--    <searchInput inputcontent="制单号" @sendData="getInputValue"></searchInput>-->
    <view class="searchContentOut">
      <view class="searchContent">
        <input placeholder="制单号" v-model="orderData.orderCode" type="text" class="searchInput" @click="selectZhiDan" />
        <view class="searchBg"  @click="scanClick">
          <image src="../../../static/index/saoyisao.png" class="searchImgSao" mode=""></image>
        </view>
      </view>
    </view>

    <view class="Content2">

      <view class="contentInner">
        <view class="contentInnerItem">

          <view class="baseListItem">
            <text class="baseListItemText">扎号</text>
            <input class="baseListItemInput2" type="text" placeholder="请输入扎号" v-model="itemData.bundleCode" />
            <view class="searchBg"  @click="queryData">
              <image src="../../../static/gongzuotai/sousuo.png" class="searchImg" mode=""></image>
            </view>

          </view>
          <view class="line"></view>
        </view>

        <view class="contentInnerItem">

          <view class="baseListItem">
            <text class="baseListItemText">增减坏片数</text>
            <input class="baseListItemInput" type="text" placeholder="请输入数量" v-model="itemData.quantity" />
          </view>
          <view class="line"></view>
        </view>

      </view>
    </view>

		<view class="Content">

			<view class="contentInner">
        <view class="contentInnerItem">

          <view class="baseListItem">
            <text class="baseListItemText">款号</text>
            <input class="baseListItemInput" disabled type="text" v-model="orderData.styleName" />
          </view>
          <view class="line"></view>
        </view>

				<view class="contentInnerItem">

					<view class="baseListItem">
						<text class="baseListItemText">制单数量</text>
						<input class="baseListItemInput" disabled type="text" v-model="orderData.alltotal" />
					</view>
					<view class="line"></view>
        </view>
        <view class="contentInnerItem">

          <view class="baseListItem">
            <text class="baseListItemText">当前坏片</text>
            <input class="baseListItemInput" disabled type="text" v-model="orderData.lossQty" />
          </view>
          <view class="line"></view>
        </view>

			</view>
		</view>


		<view class="ContentTips">
			<text class="ContentTipsText">注意：可登记的最大数,为扎数量减去损耗量</text>
		</view>

    <scroll-view scroll-y="true">
      <view>
        <!-- 详情开始 -->
        <view class="contentCenter">
          <view class="contentCenterInner">
            <!-- 扫菲记录 -->
            <view class="contentCenterInnerList">
              <view class="contentCenterInnerListItem">
                <view class="contentCountTimeNew">
                  <view class="contentCenterInnerListItemContent2">
                    <view class="contentCountTime">
                      <!-- 列表标题 -->
                      <view class="titleStyleNew">
                        <text class="titleStyleNumNewXh">序号</text>
                        <text class="titleStyleNumNewXh">扎号</text>
                        <text class="titleStyleNumNew">尺码</text>
                        <text class="titleStyleNumNew">颜色</text>
                        <text class="titleStyleNumNew">坏片数量</text>
                        <text class="titleStyleNumNew">用户</text>
                        <text class="titleStyleNumNewGX">时间</text>
                      </view>
                      <scroll-view scroll-y="true" class="titleStyleTitleNew">
                        <!-- 列表内容 -->
                        <view v-for="(item,index) in badLog">
                          <view class="titleStyleListNew" v-if="index%2==0">
                            <text class="titleStyleNumListNewXh">{{index+1}}</text>
                            <text class="titleStyleNumListNewXh">{{item.bundleCode}}</text>
                            <text class="titleStyleNumListNew">{{item.sizes}}</text>
                            <text class="titleStyleNumListNew">{{item.colors}}</text>
                            <text class="titleStyleNumListNew">{{item.lossQty}}</text>
                            <text class="titleStyleNumListNew">{{item.createBy}}</text>
                            <text class="titleStyleNumListNewGX">{{item.createTime}}</text>
                          </view>
                          <view class="titleStyleListElseNew" v-if="index%2!=0">
                            <text class="titleStyleNumListNewXh">{{index+1}}</text>
                            <text class="titleStyleNumListNewXh">{{item.bundleCode}}</text>
                            <text class="titleStyleNumListNew">{{item.sizes}}</text>
                            <text class="titleStyleNumListNew">{{item.colors}}</text>
                            <text class="titleStyleNumListNew">{{item.lossQty}}</text>
                            <text class="titleStyleNumListNew">{{item.createBy}}</text>
                            <text class="titleStyleNumListNewGX">{{item.createTime}}</text>
                          </view>
                        </view>
                      </scroll-view>
                    </view>
                  </view>
                </view>

              </view>
            </view>
          </view>
        </view>
        <!-- 详情结束 -->
      </view>
    </scroll-view>


		<view class="loginContent">

			<button style="color:#ffffff" class="login" type="default" @click="updateSplittingUpData">{{login}}</button>
		</view>


	</view>
</template>

<script>
	import MyNav from '@/components/customnavbar.vue'
	import bgImage from '@/components/backgroundImage.vue'
  import searchInput from '@/components/searchInput.vue'
  import {updateSplittingUp,getBadByBundleCode,updateBadfirm} from "../../../pages/api/api";

	export default {
		components: {
			MyNav,
			bgImage,
      searchInput
		},
		data() {
			return {

				login: '确定',

				title: '坏片管理',
				isback: true,

        itemData: {},
        orderData: {},
        badLog: [],
				sizeListData: [
            {
						title: '数量',
						value: '100'
					},
					{
						title: '尺码',
						value: 'S'
					}, {
						title: '颜色',
						value: '黑'
					}, {
						title: '床号',
						value: '100'
					}, {
						title: '损耗',
						value: '100'
					}
				],

			}
		},
    onShow() {
      var that = this
      uni.$on('globleEvent', function(res) {
        console.log('选择制单号返回数据', res) //  为 B 页面传过来的值
        that.orderData = res.orderData
        // 移除监听事件
        uni.$off('globleEvent');
      })
      if(this.orderData!='' && this.orderData.id!=''){
        // this.getOrderPrint(this.orderData.id)
      }
    },
    onLoad: function (option) {
      // let item = JSON.parse(decodeURIComponent(option.item));
      // console.log('cuttingOrderEdit',item)
      // this.itemData = item.item
    },
		methods: {
      scanClick() {

        uni.navigateTo({
          url: '/subPack/workInThePhilippines/scanTheCode/scanTheCode',
          success: res => {},
          fail: () => {},
          complete: () => {}
        });
      },
      queryData(){
        if(this.orderData=='' || this.orderData==undefined){
          uni.showToast({
            title: '制单号不能为空',
          });
          return
        }
        if(this.itemData.bundleCode=='' || this.itemData.bundleCode==undefined){
          uni.showToast({
            title: '扎号不能为空',
          });
          return
        }
        let data = {
          orderId: this.orderData.id.toString(),
          bundleCode: this.itemData.bundleCode.toString()
        }
        getBadByBundleCode({orderId: this.orderData.id,bundleCode: this.itemData.bundleCode}).then(res=>{
          if(res.code===200){
            this.orderData.lossQty = res.data.entity.lossQty
            this.orderData.splitUpId = res.data.entity.id
            this.badLog = res.data.badList
          }else {
            uni.showToast({
              title: res.msg,
              icon: 'none'
            });
          }
        })
      },
      // 获取输入框的值
      getInputValue(e){
        console.log('获取输入框的值',e);
      },
      // 制单号选择
      selectZhiDan(){
        uni.navigateTo({
          url: '/subPack/printedTicket/selectTheDocumentNumber/selectTheDocumentNumber',
          success: res => {},
          fail: () => {},
          complete: () => {}
        });
      },
      updateSplittingUpData(){
        console.log('this.itemData',this.itemData)
        if(this.itemData.quantity=='' || this.itemData.quantity<=0){
          uni.showToast({
            title: '请填写增减坏片数',
            icon: 'error'
          });
          return false
        }
        let data = {
          splitUpId: this.orderData.splitUpId,
          lossQty: this.itemData.quantity
        }
        updateBadfirm(data).then(res=>{
          if(res.code==200){
            // 显示提示信息
            uni.showToast({
              title: '保存成功',
              icon: 'none'
            });
            this.itemData.quantity=''
            this.queryData();
          }
        }).catch((err) => {
          console.log('编辑失败', err);
        });
      }
		}
	}
</script>

<style>
  .contentCenterInner {
    width: 690rpx;
    /*margin-top: 30rpx;*/
    background: #F5F7F9;
    border-radius: 30rpx 30rpx 0rpx 0rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .contentCenter {
    width: 750rpx;
    margin-top: 30rpx;
    background: #FFFFFF;
    border-radius: 30rpx 30rpx 0rpx 0rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .contentCenterInnerListItem {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
  }

  .contentCenterInnerList {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: #F5F7F9;
    width: 100%;
    /*margin-top: 30rpx;*/
  }
  .titleStyleNumListNewXh {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 100rpx;
    height: 100%;
    font-size: 24rpx;
    color: #333333;
    text-align: left;
    font-style: normal;
    text-transform: none;
    white-space: nowrap;
  }
  .titleStyleNumListNewGX {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 200rpx;
    height: 100%;
    font-size: 24rpx;
    color: #333333;
    text-align: left;
    font-style: normal;
    text-transform: none;
    white-space: nowrap;
  }
  .titleStyleNumListNew {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 130rpx;
    height: 100%;
    font-size: 24rpx;
    color: #333333;
    text-align: left;
    font-style: normal;
    text-transform: none;
    white-space: nowrap;
  }

  .titleStyleListElseNew {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 80rpx;
    background: #F9FCFF;
  }

  .titleStyleListNew {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #FFFFFF;
    width: 100%;
    height: 80rpx;
  }

  .titleStyleTitleNew {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 560rpx;
    background: #FFFFFF;
    border-radius: 0rpx 0rpx 30rpx 30rpx;
  }

  .titleStyleNumNewXh {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 100rpx;
    height: 100%;
    font-size: 24rpx;
    color: #FFFFFF;
    text-align: center;
    font-style: normal;
    text-transform: none;
    white-space: nowrap;
  }

  .titleStyleNumNewGX {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 200rpx;
    height: 100%;
    font-size: 24rpx;
    color: #FFFFFF;
    text-align: center;
    font-style: normal;
    text-transform: none;
    white-space: nowrap;
  }

  .titleStyleNumNew {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 130rpx;
    height: 100%;
    font-size: 24rpx;
    color: #FFFFFF;
    text-align: center;
    font-style: normal;
    text-transform: none;
    white-space: nowrap;
  }

  .titleStyleNew {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 80rpx;
    background: #0081FF;
    border-radius: 30rpx 30rpx 0rpx 0rpx;
    /*margin-top: 42rpx*/
  }

  .contentCenterInnerListItemContent2 {
    display: flex;
    justify-content: center;
    flex-direction: column;
  }

  .contentCountTime {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
  }

  .contentCountTimeNew {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    white-space: nowrap;
    overflow-x: scroll;
    display: -webkit-box;
    overflow-y: hidden;
  }
  .searchBg {
    width: 100rpx;
    height: 80rpx;
    background: linear-gradient(90deg, #45A8FF, #0AE1C6);
    border-radius: 20rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .searchImgSao {
    width: 86rpx;
    height: 86rpx;
  }
  .searchImg {
    width: 36rpx;
    height: 36rpx;
  }

  .searchInput {
    width: 590rpx;
    height: 100%;
    font-family: HarmonyOS Sans SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #BBBBBB;
    padding-left: 30rpx;
  // background-color: greenyellow;
  }

  .searchContentOut {
    display: flex;
    justify-content: center;
  }

  .searchContent {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 690rpx;
    height: 80rpx;
    background: #FFFFFF;
    border-radius: 20rpx;
    margin-top: 30rpx;
    flex-direction: row;
  // background-color: red;
  }
	.imagepage {
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		position: absolute;
		z-index: -1;
		left: 0;
		right: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;
	}
	.loginContent {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 750rpx;
    position: absolute;
    bottom: 30rpx;
	}

	.login {
		display: flex;
		justify-content: center;
		margin-top: 40rpx;
		align-items: center;
		text-align: center;
		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 30rpx;
		width: 690rpx;
		height: 100rpx;
		background: linear-gradient(90deg, #45A8FF, #0AE1C6);
		border-radius: 20rpx;
	}

	.ContentTipsText {
		width: 479rpx;
		height: 25rpx;
		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #FF4E00;
		line-height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}


	.ContentTips {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 30rpx;
	}


  .baseListItemInput2 {
    width: 320rpx;
    font-size: 24rpx;
    color: #333333;
    font-weight: 600;
    display: flex;
    justify-content: right;
    align-items: center;
    margin-left: 136rpx;
    text-align: left;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 30rpx;
  }

	.baseListItemInput {
		width: 320rpx;
		font-size: 24rpx;
		color: #333333;
		font-weight: 600;
		display: flex;
		justify-content: right;
		align-items: center;
		margin-right: 30rpx;
    text-align: left;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 30rpx;
	}
  /*.baseListItemInput::placeholder {*/
  /*  color: #999;*/
  /*  text-align: right;*/
  /*}*/

	.baseListItemText {
		font-size: 24rpx;
		color: #333333;
		line-height: 100rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
		font-weight: 600;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 30rpx;
	}

	.line {
		width: 100%;
		height: 1rpx;
		background: #EEEEEE;
		/* background: #EEEEEE; */
	}

	.baseListItem {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		height: 120rpx;
		width: 100%;
	}

	.baseList {
		display: flex;
		flex-direction: column;
		width: 100%;
		flex-wrap: wrap;

	}


	.contentInnerItem {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 120rpx;
	}

	.contentInner {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 100%;
	}

	.Content {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		width: 690rpx;
		height: 360rpx;
		background: #FFFFFF;

		border-radius: 30rpx;
		margin-top: 30rpx;
	}
  .Content2 {

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    width: 690rpx;
    height: 240rpx;
    background: #FFFFFF;

    border-radius: 30rpx;
    margin-top: 30rpx;
  }
</style>
